<template>
  <panel :title="title">
    <span slot="title-extra" v-animated-number="reading"></span>
    <div class="mt10">
      <x-row class="text-content">
        <x-col :span="item.span" v-for="item in info">
          <text-box
            title-place="bottom"
            :title="item.title"
            :value="item.value"
            :type="item.type"
            :align="'center'">
          </text-box>
        </x-col>
      </x-row>
    </div>
  </panel>
</template>

<script>
export default {
  name: 'TextBoxGroupPanel',

  props: ['title', 'reading', 'info']
}
</script>

<style lang="styl">
  .text-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
</style>
